<template>
  <div class="setting-item-wrapper border-bottom">
    <div class="setting-item">
      <div class="icon-wrapper">
        <div class="icon">
          <slot name='icon'></slot>
        </div>
      </div>
      <div class="content">
        <slot name="text"></slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      default: function() {
        return {
          isPhoneNumBind: true,
          bindNo: '134***7788',
          instruction: '获取事实时验证码方式，保证账户资金安全。',
          bindTitle: 'yi'
        }
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/styles/variables.styl'
  .setting-item
    display flex 
    align-items center
    background $color-text-button
    padding 18px 0
    .icon-wrapper 
      margin 0 16px 
      .icon 
        width 36px 
        height 36px 
        border-radius 50% 
        background $color-theme-red 
        display flex 
        align-items center 
        justify-content center
        .iconfont 
          font-size 18px 
          color #fff 
    .content 
      width 100%
      .text 
        display flex 
        height 100%
        flex-direction column
        align-items space-between 
        width 100% 
</style>
 